<template>
    <div :id="id">
    </div>
</template>
<script>
    import {d3, svgInit} from "./svgs";

    let _this;

    export default {
        name: "first-map",
        props: {
            lowRiskCount: {
                require: true,
                type: Number
            },
            generalRiskCount: {
                require: true,
                type: Number
            },
            highRiskCount: {
                require: true,
                type: Number
            },
            significantRisk: {
                require: true,
                type: Number
            },
            id: {
                required: true,
                type: String
            },
            width: Number,
            height: Number,
            itemWidth: Number,
            padding: Number
        },
        data() {
            return {

            };
        },
        computed: {
            salesData() {
                return [
                    {label: "Basic", color: "#007BFF", value: this.lowRiskCount},
                    {label: "Plus", color: "#FFD600", value: this.generalRiskCount},
                    {label: "Lite", color: "#FF732E", value: this.highRiskCount},
                    {label: "Elite", color: "#FF5E54", value: this.significantRisk}
                ];
            }
        },
        mounted() {
            _this = this;
            svgInit(this.drawSvg, this.id, [this.width, this.height, this.itemWidth, this.padding]);

        },
        destroyed() {
        },
        watch: {},
        methods: {
            drawSvg(svg, id, width, height, iw, ip) {
                let me = this;
                let arr = [me.lowRiskCount, me.generalRiskCount, me.highRiskCount, me.significantRisk]
                let color = ['#1372FF','#FFD31F','#FF793A','#EA4747']
                const xScale = d3.scaleLinear().domain([0, Math.max(...arr,50)]).range([0, height])
                    .nice();
                svg.attr('width',width).attr('height',height)
                svg.selectAll("rect")
                    .data(arr)
                    .enter()
                    .append("rect")
                    .attr('x',(d,i)=>{
                        return i*(iw+ip)
                    })
                    .attr('y',(d)=>{
                        return height-xScale(d)
                    })
                    .attr('width',iw)
                    .attr('height',(d)=>xScale(d))
                    .attr('fill',(d,i)=>color[i])
            }
        }
    };
</script>

<style scoped>
    .marker-content {
        width: 193px;
        height: 204px;
    }

    .text-value {
        font-size: 30px;
        font-family: 'BebasNeue';
        text-align: left;
        position: absolute;
        top: -30px;
        z-index: 1000;
    }

    .text-name {
        font-size: 12px;
        font-family: 'BebasNeue';
        text-align: left;
        position: absolute;
        z-index: 1000;
    }

</style>